<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <a-col :span="12">
        <a-card>
          <pro-table
            rowKey="id"
            ref="tableRefl"
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbarLe"
            :operate="operateLe"
            :pagination="paginationL"
            :operationWidth="180"
            :defaultToolBar="false"
            :scrollObj="{x: 100, y: 0}"
            @clickRow="(row) => {onRowClick(row)}"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <pro-table
            v-if="formState.showRight"
            rowKey="id"
            ref="tableRefr"
            :fetch="fetchr"
            :param="formState.params"
            :columns="columnsRight"
            :toolbar="toolbarRi"
            :operate="operateRi"
            :pagination="paginationR"
            :defaultToolBar="false"
            :scrollObj="{x: 100, y: 0}"
          />
          <a-empty v-else />
        </a-card>
      </a-col>
    </a-row>
    <add
      v-if="formState.visiableSub"
      :visiable="formState.visiableSub"
      :parentRow="formState.isParent ? {} : formState.parentRow"
      :recodData="formState.currentRow"
      :modalTitle="formState.modalTitle"
      :itemId="formState.currentRow.id||''"
      @close="handleClose"
    ></add>
  </page-layout>
</template>

<script>
import { defineComponent, reactive, toRaw, ref, createVNode } from "vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import add from "./modal/add.vue";

import { message, Modal } from 'ant-design-vue';

import { useI18n } from "vue-i18n";
import {
  page,
  subjectPage,
  parentList,
  remove,
  removeAll
} from "@/api/module/country-region";

export default defineComponent({
  name: "country-region",

  components: {
    add,
  },
  setup() {
    const { t } = useI18n();
    const tableRefl = ref()
    const tableRefr = ref()

    const toolbarLe = [
      { label: "新增", type: 'primary', event: function () { formState.visiableSub = true, formState.currentRow = {}, formState.isParent = true }},
      { label: "删除", type: '', event: function () { removeMethodAll(formState.selectedRowKeys) }},
    ]
    const toolbarRi = [
      { label: "新增", type: 'primary', event: function () { formState.visiableSub = true, formState.isParent = false }},
      { label: "删除", type: '', event: function () { removeMethodAll(formState.selectedRowKeys) }},
    ]
    /// 行操作
    const operateLe = [
      { label: "查看", event: function (record) { formState.showRight = true, formState.params.parent = record.id, formState.parentRow = record, tableRefr.value && tableRefr.value.reload() }},
      { label: "修改", event: function (record) { formState.visiableSub = true, formState.currentRow = record, formState.modalTitle = '修改国家', formState.isParent = true }},
      { label: "删除", event: function (record) { removeMethod(record) }},
    ];
    /// 行操作
    const operateRi = [
      { label: "修改", event: function (record) { formState.visiableSub = true, formState.currentRow = record, formState.modalTitle = '修改省/州', formState.isParent = false }},
      { label: "删除", event: function (record) { removeMethod(record) }},
    ];
    const formState = reactive({
      params: { parent: ''},
      currentId: "",
      subjectList: [],
      loading: false,
      visiableSub: false,
      currentRow: {},
      parentRow: {},
      selectedRowKeys: [],
      showRight: false,
      modalTitle: '新增国家地区',
      isParent: false
    });
    const paginationL = reactive({
      pageNum: 1,
      pageSize: 10,
    });
    const paginationR = reactive({
      pageNum: 1,
      pageSize: 10,
    });
    const modelForm = reactive({
      name: "",
    });

    const columns = reactive([
      {
        title: "国家",
        ellipsis: true,
        width: "140",
        dataIndex: "name",
        key: "name",
      },
    ]);
    const columnsRight = reactive([
      {
        title: "省/州",
        ellipsis: true,
        dataIndex: "name",
        width: "140",
        key: "name",
      },
      {
        title: "备注",
        ellipsis: true,
        width: "200",
        dataIndex: "remark",
        key: "remark",
      },
    ]);

    const handleClose = (value) => {
      formState[value] = false;
      formState.currentRow = {}
      tableRefl.value.reload()
      tableRefr.value.reload()
    };

    /// 父级数据来源 [模拟]
    const fetch = async (param) => {
      var response = await parentList(param);
      return {
        data: response.data.record,
        total: response.data.total
      };
    };
    /// 子级数据来源 [模拟]
    const fetchr = async (param) => {
      var response = await page(param);
      return {
        data: response.data.record,
        total: response.data.total
      };
    };
    // 删除
    const removeMethod = (recod) => {
      Modal.confirm({
        title: '您是否确定要删除此数据?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          remove({id: recod.id }).then(res => {
            if (res.success) {
              message.success({content: "删除成功", key: '', duration: 1}).then(()=>{
                tableRefl.value.reload()
                tableRefr.value.reload()
              })
            } else {
              message.success({content: "删除失败", key: '', duration: 1})
            }
          }).catch(err => {
            message.success({content: "删除失败", key: '', duration: 1})
          })
        }
      })
    }
    // 删除
    const removeMethodAll = (ids) => {
      Modal.confirm({
        title: '您是否确定要删除此数据?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          removeAll({ids: ids }).then(res => {
            if (res.success) {
              message.success({content: "删除成功", key: '', duration: 1}).then(()=>{
                tableRefl.value.reload()
              })
            } else {
              message.success({content: "删除失败", key: '', duration: 1})
            }
          }).catch(err => {
            message.success({content: "删除失败", key: '', duration: 1})
          })
        }
      })
    }

    const getSubjectPage = () => {
      return subjectPage({ pageNum: 1, pageSize: 10000 }).then((res) => {
        if (res.success) {
          formState.subjectList = res.data;
        }
      });
    };
    getSubjectPage();

    const onSelectChange = selectedRowKeys => {
      formState.selectedRowKeys = selectedRowKeys;
    };
    const onRowClick = (row) => {
      formState.showRight = true
      formState.params.parent = row.id
      formState.parentRow = row
      tableRefr.value && tableRefr.value.reload()
    }

    return {
      t,
      fetch,
      fetchr,
      tableRefl,
      tableRefr,
      columns,
      toolbarLe,
      columnsRight,
      paginationL,
      paginationR,
      formState,
      modelForm,
      handleClose,
      onSelectChange,
      toolbarRi,
      operateLe,
      operateRi,
      onRowClick
    };
  },
});
</script>


<style lang="less" scoped>
.container-sub {
  display: flex;

  .left-sub {
    width: 49%;
  }

  .right-sub {
    width: 49%;
  }
}
.left-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;

  .list-item {
    display: inline-block;
    width: 100%;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
  }
}

.active {
  background: #7eb9f8;
  color: #fff;
}
</style>
